<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 订单管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.orderType" placeholder="订单类型" class="handle-select mr10" @change="handleSearch">
                    <el-option key="1" label="服务订单" value="0"></el-option>
                    <el-option key="2" label="车品订单" value="1"></el-option>
                </el-select>
                <el-input v-model="query.orderNum" placeholder="订单号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="serviceName" :label="getLable()"></el-table-column>
                <el-table-column label="服务价格">
                    <template slot-scope="scope">￥{{scope.row.totalPrice}}</template>
                </el-table-column>
                <el-table-column label="订单号" prop="orderNum"></el-table-column>
                <el-table-column prop="payNum" label="交易号"></el-table-column>
                <el-table-column label="订单状态" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.payStatus===1?'error':'success'"
                        >{{getPayStatus(scope.row.payStatus)}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="订单创建时间">
                    <template slot-scope="scope">
                        {{formatDate(scope.row.orderTime)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-view"
                            @click="handleEdit(scope.$index)"
                        >查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageNum"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="订单详情" :visible.sync="editVisible" width="50%">
            <el-form ref="form" label-width="80px">
                <el-form-item label="汽车图片">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="showData.carImgsrc"></el-image>
                </el-form-item>
                <el-form-item label="服务名称">
                    <el-input v-model="showData.serviceName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input v-model="showData.orderNum" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="交易号">
                    <el-input v-model="showData.payNum" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="交易日期">
                    <el-date-picker
                    format="yyyy-MM-dd HH:mm:ss"
                    :value="getRealTime(showData.orderTime)"
                    type="datetime"
                    placeholder="选择日期时间"
                    :disabled="true">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input :disabled="true" v-model="showData.orderCount"></el-input>
                </el-form-item>
                <el-form-item label="优惠价格">
                    <el-input :disabled="true" v-model="showData.preferentialPrice"></el-input>
                </el-form-item>
                <el-form-item label="真实价格">
                    <el-input :disabled="true" v-model="showData.serviceZprice"></el-input>
                </el-form-item>
                <el-form-item label="支付类型">
                    <el-input :disabled="true" v-model="showData.payType"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-input :disabled="true" v-model="showData.payStatus"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getOrders,searchServerOrders,getGoodsOrders,searchGoodsOrders } from '../../api/order';

export default {
    name: 'basetable',
    data() {
        return {
            query: {
                orderType: '0',
                orderNum: '',
                pageNum: 1,
                pageSize: 5
            },
            showData:{},
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getLable(){
            if(this.query.orderType == '0'){
                return '服务名称';
            }else{
                return '商品名称';
            }
        },
        getRealTime(time){
            if(this.query.orderType == '0'){
                return new Date(time + 1000 * 60 * 60 * 8);
            }else{
                return time;
            }
        },
        getPayStatus(payStatus) {
            if(payStatus == 1 || payStatus == '待付款'){
                return '待付款';
            }else if(payStatus == 2 || payStatus == '待收货'){
                return '待收货';
            }else if(payStatus == 3 || payStatus == '待服务'){
                return '待服务';
            }else if(payStatus == 4 || payStatus == '待评价'){
                return '待评价';
            }else{
                return '待售后';
            }
        },
        getPayType(payType) {
            if(payType == 1 || payType == '支付宝'){
                return '支付宝';
            }else if(payType == 2 || payType == '微信'){
                return '微信';
            }else{
                return '卡尔钱包';
            }
        },
        formatDate(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return year + '年' + month + '月' + day + '日';
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            if(this.query.orderType == '0'){
                if(this.query.orderNum == ''){
                    getOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }else{
                    searchServerOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }
            }else{
                if(this.query.orderNum == ''){
                    getGoodsOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }else{
                    searchGoodsOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            if(this.query.orderType == '0'){
                if(this.query.orderNum != ''){
                    searchServerOrders(this.query).then(res => {
                        console.log(res);
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    })
                }else{
                    this.getData();
                }
            }else{
                if(this.query.orderNum == ''){
                    this.getData();
                }else{
                    searchGoodsOrders(this.query).then(res => {
                    console.log(res);
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                });
                }
                
            }
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 编辑操作
        handleEdit(index) {
            this.showData = this.tableData[index];
            this.editVisible = true;
            console.log(this.showData);
            var payType = this.getPayType(this.showData.payType);
            this.showData.payType = payType;
            var payStatus = this.getPayStatus(this.showData.payStatus);
            this.showData.payStatus = payStatus;
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        }
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
